<template>
  <div>
    <Box :caption="caption">
      <div
        class="system_setting"
        v-if="$route.path === '/configManage/systemSetting'"
      >
        <!-- 搜索栏、新增按钮 -->
        <div class="top">
          <!-- <span>系统名称</span> -->
          <el-input
            v-model="name"
            placeholder="请输入系统设置"
            prefix-icon="el-icon-search"
            @keypress.enter.native="getSysList"
            clearable
            @clear="getSysList"
          ></el-input>
          <el-button class="search" @click="getSysList"><i class="el-icon-search"></i>搜索</el-button>
          <el-button
            class="add right"
            @click="() => {$router.push('/configManage/systemAdd');}"
            ><i class="el-icon-plus"></i>新增</el-button
          >
        </div>
        <!-- 列表 -->
        <div class="content">
          <el-table :data="systemList" stripe style="width: 100%">
            <el-table-column prop="name" label="系统名称" min-width="120">
            </el-table-column>
            <el-table-column prop="tenantName" label="所属租户" min-width="120">
            </el-table-column>
            <el-table-column
              prop="storageName"
              label="存储配置"
              min-width="120"
            >
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" min-width="120">
            </el-table-column>
            <el-table-column prop="updateDate" label="修改时间" min-width="120">
            </el-table-column>
            <el-table-column prop="remarks" label="备注" min-width="120">
            </el-table-column>
            <el-table-column label="状态" min-width="120">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  @change="changeSystemStatus(scope.row)"
                  active-color="#1e9ffe"
                  inactive-color="#BFBFBF"
                  active-value="start"
                  inactive-value="stop"
                  :width="56"
                  :class="{ 'switch-is-actived': scope.row.status === 'start' }"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220"  fixed="right">
              <template slot-scope="scope">
                <div class="operation">
                  <el-tooltip
                    content="查看"
                    effect="light"
                    popper-class="small-tip"
                  >
                    <el-button
                      class="action-btn look"
                      icon="el-icon-view"
                      @click="
                        () => {
                          $router.push({
                            path: '/configManage/systemView',
                            query: { id: scope.row.id },
                          });
                        }
                      "
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    content="编辑"
                    effect="light"
                    popper-class="small-tip"
                  >
                    <el-button
                      class="action-btn edit"
                      icon="el-icon-edit"
                      @click="
                      () => {$router.push({path: '/configManage/systemEdit', query: { id: scope.row.id },});}"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    content="删除"
                    effect="light"
                    popper-class="small-tip"
                  >
                    <el-button
                      class="action-btn del"
                      icon="el-icon-delete"
                      @click="removeSystem(scope.row.id)"
                    ></el-button>
                  </el-tooltip>
                </div>
                <slot
                  name="other"
                  :data="scope.row"
                  :index="scope.$index"
                ></slot>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="footer">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :total="count"
            background
          >
          </el-pagination>
        </div>
      </div>
      <router-view />
    </Box>
  </div>
</template>
<script>
import Box from "@/components/pc/Box";
export default {
  name: "systemSetting",
  components: { Box },
  data() {
    return {
      caption: "系统设置",
      count: 0,
      name: "",
      // 当前页数
      currentPage: 1,
      // 当前每页条数
      pageSize: 8,
      systemList: [],
    };
  },
  created() {
    this.getSysList();
  },
  watch: {
	  // 监听路由
	  $route(to,from){
		  // 进入之前
		  if(to.path == '/configManage/systemSetting'){
			  // 如果搜索不为空时
			  if(this.search !== ''){
				  this.transSearch();
			  }else {
				  this.getSysList();
			  }
		  };
    }
  },
  methods: {
    // 渲染列表
    getSysList() {
      this.$Http
        .systemList({
          name: this.name,
          pageSize: this.pageSize,
          currentPage: this.currentPage,
        })
        .then((res) => {
          this.count = res.data.count;
          this.systemList = res.data.list;
        });
    },
    // 监听状态改变
    changeSystemStatus(sys) {
      this.$Http.changeStatus({
          id: sys.id,
          status: sys.status,
        })
        .then((res) => {
          if (res.code !== "SUCCESS") {
            this.status = status;
            this.getSysList();
            return this.$message({
              type: "error",
              message: "系统状态改变失败!",
            });
          } else {
            return this.$message({
              type: "success",
              message: "系统状态改变成功！",
            });
          }
        });
    },
    // 监听删除
    removeSystem(id) {
      this.$confirm("确认删除该系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$Http
            .delSystemList({
              id: id,
            })
            .then((res) => {
              if (res.code !== "SUCCESS") {
                return this.$message({
                  type: "error",
                  message: "系统删除失败!",
                });
              } else {
                this.getSysList();
                return this.$message({
                  type: "success",
                  message: "系统删除成功",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 监听页码值改变 当前页数
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.currentPage = newPage;
      this.getSysList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "src/assets/css/content.scss";
</style>
